<template>
  <div class="get-award-dialog-content">
    <img src="./../assets/imgs/yanhua-wave.gif" class="baozu">
    <img src="./../assets/imgs/cloud-left.png" class="left-cloud">
    <img src="./../assets/imgs/cloud-right.png" class="right-cloud">
    <div class="nianhua">
      <div class="head">
        <div>
          <h4>哇！恭喜你！</h4>
        </div>
        <h4>你抽中了10元新春话费红包！</h4>
      </div>
      <div class="card">
        <div class="content-code clearfix">
          <div class="fl fl-1">
            <p>兑换码：</p>
            <span>{{code}}</span>
          </div>
          <div class="fl fl-2">
            <span ref="copy" :data-clipboard-text="code" @click="copy" class="able-copy">复制兑换码</span>
          </div>
        </div>
        <div class="shuoming">
           *请截图保存，或在首页【我的兑换码】中查看。兑换码仅可使用一次，并于3月16日23:00失效，请尽快兑换哦～
        </div>
      </div>

      <div class="more">
        <img src="./../assets/imgs/lotto/award_img_01.png" ref="copy" :data-clipboard-text="code" @click="copy1" class="able-copy heartbeat">
      </div>
      <p class="app-text">
        打开杭州银行手机APP→新春抓年兽活动
      </p>
      <p class="app-text">
        话费兑换专区→输入兑换码→马上兑红包
      </p>
      
    </div>
    <div class="close">
      <img src="./../assets/imgs/close-btn.png" @click="close">
    </div>
    <!-- <shake-hand></shake-hand> -->
  </div>
</template>
<script>
import Clipboard from 'clipboard'
import  ShakeHand from './shake-hand.vue'
import { Toast } from 'mint-ui'

export default {
  name: "noAward",
  components:{
    ShakeHand
  },
  data () {
    return {
      clipboard:null
    };
  },
  computed:{
    code:function(){
      return this.$store.state.coupon
    },
  },
  mounted(){
    this.clipboard = new Clipboard(this.$el.getElementsByClassName('able-copy'))
  },
  methods:{
    copy(){
      console.log(1)
      let vm = this
      this.clipboard.on('success', function(e) {
          Toast('复制成功');
          e.clearSelection();
      });
    },
    copy1(){
      console.log(2)
      let vm = this
      window.location.href = 'http://www.hzbank.com.cn/mobile/wallet.html'
      // this.clipboard.on('success', function(e) {
      //     window.location.href = 'http://www.hzbank.com.cn/mobile/wallet.html'
      //     e.clearSelection();
      // });
    },
    close(){
      this.$emit('close')
      this.$router.push({path:'/'})
    },
  },
}
</script>
<style lang="scss" scoped>
@import './../styles/common.scss';
.get-award-dialog-content{
  padding-top: px2rem(100);
  text-align: center;
  position: relative;
  .left-cloud{
    top:px2rem(200);
  }
  .right-cloud{
    bottom:px2rem(200);
  }
  .baozu{
    position: absolute;
    right: px2rem(60);
    top:px2rem(160);
    transform: scale(.8);
  }
  .nianhua{
    background-image: url('./../assets/imgs/nianhua_large.png');
    //height: px2rem(706);
    padding-bottom: px2rem(100);
    width: 90%;
    margin: 0 auto;
    @include bg-img();
    .head{
      padding-top: px2rem(100);
      h4{
        @extend .dialog-title;
        background-image: url('./../assets/imgs/nianhua-head.png');
      }
    }
    .card{ 
      @include bg-img();
      // height: px2rem(210);
      width:76%;
      margin: 0 auto;
      margin-top:px2rem(24);
      background-image: url('./../assets/imgs/lotto/award_img_02.png');
      position: relative;
      left:px2rem(8);
      color:$color-1;
      vertical-align: top;
      box-sizing: border-box;
      padding-top: px2rem(26);
      padding-bottom: px2rem(36);
      .content-code{
        width:84%;
        margin: 0 auto;
        border-bottom: 1px solid $color-1;
        padding-bottom: px2rem(6);
        .fl-1{
          width: 50%;
          text-align: left;
          p{
            margin: 0;
            padding: 0;
            text-align: left;
            @include font-dpr(22px);
          }
          span{
            @include font-dpr(36px);
            font-weight: bold;
            padding-top: px2rem(14) ;
            
          }
        }
        .fl-2{
          //@extend .center-parent;
          text-align: center;
          width:48%;
          padding-top: px2rem(16);
          span{
            font-size: px2rem(24);
            //@include font-dpr(24px);
            color: #fff;
            background: $color-1;
            padding: px2rem(10) px2rem(20);
            border-radius: px2rem(30);
            
          }
        }
      }
      .shuoming{
        width:84%;
        margin: 0 auto;
        text-align: left;
        margin-top: px2rem(10);
        font-size: px2rem(18);
        //@include font-dpr(24px);
        line-height: px2rem(28);
      }
    }
    .more{
      text-indent: px2rem(10);
      padding-top: px2rem(24);
      img{
        width:70%;
      }
    }
    p.app-text{
      margin: 0;
      padding: 0;
      @include font-dpr(24px);
      width:82%;
      margin: 0 auto;
      padding-top: px2rem(6);
      &:first-of-type{
        margin-top: px2rem(-20);
      }
    }
  }
  .close{
    margin-top: px2rem(32);
    img{
      height: px2rem(80);
    }
  }
  .hand-img{
    bottom: px2rem(240);
  }
}
</style>